<template>
  <el-dialog
      v-model="tranHistoryDialog"
      title="更新交易阶段"
      width="500"
      align-center
  >
    <el-form
        ref="tranHistoryRef"
        style="max-width: 600px"
        :model="tranHistoryModel"
        label-width="auto"
    >
      <el-form-item label="交易阶段" prop="stage">
        <el-select
            v-model="tranHistoryModel.stage"
            clearable
            placeholder="请选择交易阶段"
            style="width: 240px"
        >
          <el-option
              v-for="item in tranStageSelect"
              :key="item.id"
              :label="item.typeValue"
              :value="item.id"
          />
        </el-select>
      </el-form-item>
    </el-form>

    <el-form-item label="交易金额">
      <el-input type="number" v-model="tranHistoryModel.money" />
    </el-form-item>

    <el-form-item label="预计成交时间">
      <el-date-picker
          v-model="tranHistoryModel.expectedDate"
          type="datetime"
          style="width: 100%"
          value-format="YYYY-MM-DD HH:mm:ss"
          placeholder="请选择预计成交时间"
      />
    </el-form-item>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="tranHistoryDialog = false">取消</el-button>
        <el-button type="primary" @click="submitTranHistory">
          提交
        </el-button>
      </div>
    </template>
  </el-dialog>

  <!-- ------------------------------------------------------------------------------------------ -->
  <el-form
    style="max-width: 95%"
    :rules="tranRemarkRules"
    ref="tranRemarkRef"
    :model="tranRemark"
    label-width="auto"
    class="demo-ruleForm"
    status-icon
  >

    <el-form-item label="id">
      <el-input v-model="tranMode.id" disabled/>
    </el-form-item>

    <el-form-item label="交易流水号:">
      <el-input v-model="tranMode.tranNo" disabled/>
    </el-form-item>

    <el-form-item label="交易金额">
      <el-input :model-value="tranMode.money" disabled/>
    </el-form-item>

    <el-form-item label="预计成交时间">
      <el-input :model-value="tranMode.expectedDate" disabled/>
    </el-form-item>

    <el-form-item label="交易阶段">
      <el-input :model-value="tranMode.dicValPO.typeValue" disabled/>
    </el-form-item>

    <el-form-item label="下次更新时间">
      <el-input :model-value="tranMode.nextContactTime" disabled/>
    </el-form-item>

    <el-form-item label="创建时间">
      <el-input v-model="tranMode.createTime" disabled/>
    </el-form-item>

      <el-form-item label="创建人">
        <el-input v-model="tranMode.createBy" disabled/>
      </el-form-item>

      <el-form-item label="填写跟踪记录" prop="noteContent">
        <el-input type="textarea" rows="4" v-model="tranRemark.noteContent" />
      </el-form-item>

      <el-form-item label="选择跟踪方式" prop="noteWay">
        <el-select v-model="tranRemark.noteWay" placeholder="请选择跟踪方式" style="width: 240px">
          <el-option
              v-for="item in noteWaySelect"
              :key="item.id"
              :label="item.typeValue"
              :value="item.id"
          />
        </el-select>
      </el-form-item>
      <el-button type="primary" size="large"  @click="submitTranRemark">提交</el-button>
      <el-button type="success" size="large"  @click="uploadTranStage">更新交易阶段</el-button>
      <el-button type="success" size="large" plain @click="goBack">点击返回</el-button>
  </el-form>



</template>


<script >

import {doGet, doPost} from "@/http/httpRequest";
import {goBack, messageTip} from "@/util/utils";

  export default {
    name:"TranDetailView.vue",
    data(){
      return{
        Mode :{},
        tranMode:{
          dicValPO:{},
        },
        pageSize : 0,
        total:0,
        pageSize2 : 0,
        total2:0,
        tranRemark :{},
        noteWaySelect : [],
        tranHistoryDialog: false,
        tranStageSelect:{},
        tranHistoryModel:{},
        tranRemarkRules:{
          noteContent:[
            {required:true, message: "请输入", trigger:'blur'}
          ],
          noteWay:[
            {required:true, message: "请输入", trigger:'blur'}
          ]
        },
      }
    },
    inject:["reload"],
    methods: {
      uploadTranStage() {
        this.tranHistoryDialog = true;
        this.loadDicTranStage();
      },
      /**
       * 提交交易历史
       */
      submitTranHistory() {
        this.tranHistoryModel.tranId = this.tranMode.id;
        doPost("api/addTranHistory",this.tranHistoryModel).then(res =>{
          if (res.data.code === 200) {
            messageTip("提交成功", "success")
            this.reload();
          }
        })
      },
      page(number) {
        this.getRemark(this.$route.params.id, number)
      },
      page2(number) {
        this.getCustomerRemark(this.$route.params.id, number)
      },
      /**
       * 加载订单详情
       */
      loadTran(tranId) {
        doGet("api/tranDetail/" + tranId, {}).then(res => {
          if (res.data.code === 200) {
            this.tranMode = res.data.data;
          }
        })
      },

      goBack,
      getNoteWayDic(typeCode) {
        doGet("api/loadDicSelect", {
          select: typeCode
        }).then(res => {
          this.noteWaySelect = res.data.data;
        })
      },
      /**
       * 提交交易跟踪记录
       */
      submitTranRemark(){
        console.log(this.tranRemark.description);
        console.log(this.tranRemark.noteWay);
        this.$refs.tranRemarkRef.validate(valid =>{
          if (valid) {
            this.tranRemark.tranId = this.tranMode.id;
            doPost("api/submitTranRemark", this.tranRemark).then(res =>{
              if (res.data.code === 200) {
                messageTip("提交成功", "success")
              }
            })
          }
        })
      },
      loadDicTranStage(){
        doGet("api/loadTranStageDic",{}).then(res =>{
          if (res.data.code === 200) {
            this.tranStageSelect = res.data.data;
          }
        })
      }
    },
    mounted() {
      this.loadTran(this.$route.params.id)
      //获取跟踪方式字典值
      this.getNoteWayDic("noteWay");
    },
  }
</script>


<style scoped>
.page{
  display: flex;
  justify-content: center;
}
</style>